零基础却想玩转 3D Shader 编程？ 或许你可以试试这个

《Cocos Creator 3D Shader 零基础编程入门》，是由麒麟子开设的系列教程。拥有十五年编程经验，曾参与开发过自用引擎的麒麟子，一直在不断免费输出 Cocos 游戏开发经验和教程，其针对引擎基础 API 使用的《Cocos Creator 3D 研究笔记》系列教程收获了不少赞誉。

此次新开的 Shader 编程系列，将通过基础知识讲解融合原理科谱的方式，带领大家一起学习 Cocos Creator 3D 材质系统，并将结合具体案例进行实操教学。将包含但不限于如下内容知识点：

• Cocos Creator 3D 材质和 Effect 使用介绍

  材质的使用和 Effect 的使用，面板参数、内置Shader功能介绍

• 最简单的 Shader

  Effect内部各部分在渲染流程中起的作用

• 添加 Uniform 变量

  如何添加 Unifrom 变量，如何显示在 Inspector 面板，如果用代码操作添加的变量

• 纹理采样

  如何进行纹理采样，UV 相关参数的含义

• 混合因子

  透明混合因子的意义和效果

• 多层纹理混合采样

  多层纹理混合 Shader 的编写，以及可以做出的效果

• 纹理动画

  如何进行纹理切换

• UV 流动动画

  如何进行纹理流动，以及可以做出的效果

• 反射

  如何采样天空盒材质，实现反射效果

• 渲染到纹理

  如何将场景渲染到纹理，并显示到屏幕上

零、菜鸡麒麟子

---

每个人都是从「菜鸡」过来的，在写这篇文章时，我想起了十几年前的自己。

我还能清晰地感受到自己接触 3D 编程第一天时兴奋和学而不进的焦虑。

说来也巧，我正式学习 3D 编程，是2008年5月12号，也就是汶川地震那天。

我记得上午有两节高等数学课，由于前一天晚上睡太晚，起来的时候发现已经迟到了。

索性就旷课吧，反正我高数怎么考也只有49，不在乎这点平时成绩。

睡太晚的原因，是刚学会 C++ 教程的我，突然在群里接触到了一个叫 D3D 的东西，这东西就是能够渲染出 3D 游戏的 API。

兴奋的我在网上到处找PDF，直到《Direct3D9.0 入门基础》PDF 下载到硬盘里的时候，才收拾着睡觉了。

由于 PDF 看着没感觉，没去上数学课的我，又去学校图书馆借了实体书，这就是我 3D 编程编程人生的开始。

由于我自己经历过「学而不能用」的痛苦。所以我就在想，能不能从「边用边学」的角度，来引领大家逐步熟悉 Cocos Shader 相关的东西。

这也是这个系列教程的目的----学以致用。

从0-1虽然简单，但它是一种脱变。

希望大家能够坚持下来，完成自己从0到1的脱变。

一、什么是 Cocos Shader

---

可能有朋友会感到奇怪，百度上搜不到 Cocos Shader。

那就对了，因为 Cocos Shader 是 Cocos Creator 3D Shader 的简称，是麒麟子为了方便社区交流，而发明的缩写。

Cocos Creator 2D 和 Cocos Creator 3D 合并后，材质系统和编辑器都将只有一个版本。

而从目前的技术架构和官方透露的信息来看，合并后，技术框架采用目前 Cocos Creator 3D 的技术框架，因为它更成熟，更前沿，能更好地支持 3D 和 2D。

合并后，编辑器名称改为 Cocos Creator 3.0，将不再有 3D 这样的称呼，因为只有一个版本。

最终 Cocos Creator 的 Shader，就是现在 Cocos Creator 3D 的 Shader。

综上所述！

我们现在就叫 Cocos Creator 3D Shader 为 Cocos Shader，是一个很科学的做法。

Cocos Shader 不仅仅指着色器代码，实际上它包含了三个东西。

这三个东西的共同作用下，我们能够渲染出想要的效果。

• 材质(material)
  

• 效果代码(effect)

• 参数(uniform、sampler等）

二、Cocos 材质使用步骤

---

1、创建一个 material 材质文件

2、指定一个要用到的 effect 和对应的 technique

可以简单理解为一个 effect 对应多个 technique，effect+technique 决定了渲染手法。

比如 builtin-standard 包含 opaque 和 transparent 两个 technique。前者用于实体，后者用于半透明物体。

3、设置好面板上的参数

面板参数很多，但不要怕，麒麟子在这里逐一解释一下(不需要在今天就全部弄明白，随着学习的深入，这些参数都会明白的）。

• USE LIGHTMAP：勾选上这个选项后，表示你的模型接受 LIGHTMAP 处理，这个是配合场景的光照图烘焙功能的
  

• USE VERTEX COLOR：是否使用顶点颜色

• USE NORMAL MAP：是否使用法线图
  

• HAS SECOND UV: 是否拥有第二套 UV
  

• USE ALBEDO MAP：是否使用颜色贴图
  

• PBR UV：选择 PBR 使用第一套还是第二套 UV，默认是第一套
  

• USE PBR MAP：是否需要使用 PBR 贴图，如果使用了 PBR 贴图，那贴图的通道将和 occlusion,roughness,metallic 值相乘作为最终的值
  

• USE METALLIC ROUGHNESS MAP：是否使用金属度和粗燥度贴图

• USE OCCLUSION MAP： 是否使用 occlusion 贴图

• USE EMISSIVE MAP： 是否使用自发光贴图

• USE ALPHA TEST: 是否开启 ALPHA TEST

• Tilling Offset：纹理的缩放和偏移，xy 为缩放，zw 为偏移

• Albedo: 颜色，会和 albedoMap 相乘
  

• AlbedoScale: 不同通道的缩放值 这个我也没有用过
  

• Occlusion、Roughness、Metallic、Emissive、EmissiveScale：这几个的作用对应上面的那堆 Map，会和那堆 MAP 的通道相乘作为最终结果。如果没有指定那堆 Map 贴图，则直接使用这个值。

• 我们用得最多的就是 METALLIC 和 ROUGHNESS，调节这两个的值，就可以很明显改变一个物体的反射强度和高光强度。

4、渲染状态

除了这堆 uniforms 外，偶尔我们还需要改动渲染状态。但渲染状态我们一般是不需要改动其它的。因为面片顺序的关系，如果出现前后背面裁剪不对的情况。可以修改 CullMode 来解决。如下图所示：

三、最简单的 Shader builtin-unlit

---

从面板上我们就可以看出来，unlit 比 standard 少了很多东西。他没有 PBR 光照相关的东西，最复杂的效果就是渲染一个半透明带贴图的物体。

我们后面的教程都将逐步在 unlit 这个 effect 上添加内容，也渐进式地掌握 Cocos Shader 的内容。

请大家打开 builtin-unlit.effect，打开方式如下图所示：

Assets窗口 -> internal -> builtin-unlit -> Reveal In Explorer（在资源管理器中打开）

我们来逐一分解各部分的内容。

1、定义部分

定义部分也就是文件最开始的部分，它描述了这个 effect 所具备的 technique、pass 结构以及外部变量和渲染状态。如下图：

-name:对应的就是每一个 technique名字。

可以看到，builtin-unlit 定义了 opaque、transparent、add、alpha-blend 四个 technique，每个 technique 只有一个 pass。

（这里补充解释一下 pass，有一些效果，我们需要多次渲染同一个物体才能实现，这个时候就需要多 pass，大部分情况下，只需要一个 pass就能搞定了。）

区域1：面板可见常量

定义面板上可见的常量，也就是说，shader 中定义好的 uniform，如果要让面板可见，就需要在这个部分做引出。

区域2：入口函数

定义的是 vs 和 fs 分别使用哪个入口函数。也就是说，你可以给每个 pass 指定不同的 vs 和 fs shader。

区域3：深度读写开关

我们可以控制是否做深度测试和是否写入深度。

一般情况下，实体对象，深度测试和深度写入都会开启，但像技能特效中的半透明效果，就只进行深度测试，而不进行深度写入。

其余更复杂的情况，则需要根据具体需求来决定。

区域4：Alpha 混合控制

这个在以前的 UI 面板上大家见过了，就是控制与目标缓冲区的混合方式。

区域5：光栅化参数

和之前提到的渲染状态面板中的 ClullMode 是同一个东西。

2、unlit-vs（即顶点着色器部分）

如下图所示：

大家会发现，#if USE_VERTEX_COLOR ... #endif 这样的宏定义，这个宏定义会出现在材质面板上。

和 C++ 等语言中的宏定义一样，如果这个宏没有被定义（即面板上不勾选），那这部分的代码相当于不存在。

所以，在宏定义中声明的变量，一定要在宏定义中使用，否则会报错。

找到所有的 out 变量，就能找到 vert 函数输出了哪些东西。在 unlit 中我们可以找到

out float factor_fog（雾效因子）、out lowp vec4 v_color (顶点颜色)、out vec2 v_uv (顶点 uv) 三个输出结果。

vert 函数本身则特别简单，这里就不多解释。

3、unlit-fs（即像素着色器部分）

如下图所示：

写 fs 的时候，只需要注意一点。那就是 vs 的 out 即为 fs 的 in，在写的时候也要注意宏的匹配，否则会发生编译错误。

fs 只输出1个东西，那就是颜色 ，vec4 frag 的返回值就是我们最终要输出的颜色。

通过 vs 传过来的 uv 和参数，我们进行纹理采样，并做一系列的运算，即可获得我们想要的效果。

大家可以尝试在 o = CC_APPLY_FOG(o,factor_fog)之前，对 o.rgb 进行一些运算，就能立即看到颜色发生了变化。

四、结束语

---

本文对 Cocos Shader 做了一个大概的介绍，使大家掌握材质的使用，材质面板参数的含义和 effect 文件的内容。

目前教程已更新3期，更多内容欢迎点击：

• 03、Hello World 与可编程管线浅析

欢迎感兴趣的开发者关注麒麟子进行学习，相关源码也将在公众号「我是麒麟子」上放出。

祝大家学习愉快！

如果您在使用 Cocos Creator 2D/3D 的过程中，遇到任何问题，欢迎通过论坛、小秘书、GitHub 等渠道向我们提交使用反馈！

10月17日，Cocos 游戏开发分享会·深圳站，正在火热报名中，场地有限，名额先到先得，赶快戳下方二维码报名吧!